<template>
  <div class="in-out-info flex flex-column">
    <a-form ref="form" layout="inline" class="flex-fixed" style="margin-bottom: 10px">
      <a-form-item>
        <a-range-picker v-model:value="time" show-time valueFormat="YYYY-MM-DD HH:mm:ss" :allow-clear="false" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search"> 搜索<a-icon type="search" /> </a-button>
      </a-form-item>
    </a-form>
    <common-table
      ref="table"
      :fetch="getTableDataAsync"
      :fetch-params="apiParams"
      :columns="columns"
      :show-toolbar="false"
      @vue:mounted="() => $refs.table.load()"
      class="flex-auto-height"
    >
      <template #index="{ index }">
        <span>{{ index + 1 }}</span>
      </template>
      <template #catch_img_url="{ catch_img_url, scope }">
        <avatar-card style="width: 100%" :src="scope.catch_img_url" />
      </template>
      <template #catch_full_img_url="{ catch_full_img_url, scope }">
        <avatar-card style="width: 100%" :src="scope.catch_full_img_url" />
      </template>
    </common-table>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import AvatarCard from '@gis/lib/components/img-viewer/avatar-card.vue';
import { peopleHouseWarnPeopleSnapList } from '@gis/lib/api';

export default {
  name: 'in-out-info',
  components: { AvatarCard, CommonTable },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      time: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')],
      columns: [
        {
          title: '抓拍时间',
          dataIndex: 'create_time',
        },
        {
          title: '特征图',
          dataIndex: 'catch_img_url',
          scopedSlots: { customRender: 'catch_img_url' },
          width: 60,
        },
        {
          title: '全图',
          dataIndex: 'catch_full_img_url',
          scopedSlots: { customRender: 'catch_full_img_url' },
          width: 60,
        },
        {
          title: '所属小区',
          dataIndex: 'yard_name',
        },
        {
          title: '设备名称',
          dataIndex: 'device_name',
        },
        {
          title: '设备序列号',
          dataIndex: 'device_identification',
        },
        {
          title: '方向',
          dataIndex: 'access_type',
          customRender: (val) => (val == '1' ? '进' : '出'),
          width: 60,
        },
      ],
    };
  },
  computed: {
    apiParams() {
      const [start, end] = this.time;
      return {
        start_time: start ? start : '',
        end_time: end ? end : '',
        people_id: this.data.people_id,
      };
    },
  },
  methods: {
    search() {
      this.$refs.table.load();
    },
    async getTableDataAsync(params) {
      return this.handleTableResult(await peopleHouseWarnPeopleSnapList(params));
    },
  },
};
</script>

<style scoped lang="less">
.in-out-info {
  width: 100%;
  height: 100%;
}
</style>
